<template>
  <div class="home">
    <!-- 上 -->
    <div class="home-top flex items-center mt-[10px]">
      <!-- <img class="header-left-logo" src="@/assets/img/logo.png" /> -->
      <!-- <img
        class="block w-[100px] ml-[30px] mr-[30px]"
        alt="Vue logo"
        src="~@/assets/logo_melomini.png"
      /> -->
      <!-- <el-avatar :size="100" src="~@/assets/logo_melomini.png" /> -->
      <el-avatar
        :size="100"
        src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
      />
      <div class="home-top-item flex flex-col ml-[30px] mr-[30px]">
        <span class="home-top-item-name">姓名</span>
        <span class="home-top-item-val font-bold">{{ userInfo.name }}</span>
      </div>
      <div class="home-top-item flex flex-col ml-[30px] mr-[30px]">
        <span class="home-top-item-name">别名</span>
        <span class="home-top-item-val font-bold">{{
          userInfo.aliasName
        }}</span>
      </div>
      <div class="home-top-item flex flex-col ml-[30px] mr-[30px]">
        <span class="home-top-item-name">最近登录时间</span>
        <span class="home-top-item-val font-bold">{{
          userInfo.lastLoginTime
        }}</span>
      </div>
      <div class="home-top-item flex flex-col ml-[30px]">
        <span class="home-top-item-name">最近登录ip</span>
        <span class="home-top-item-val font-bold">{{
          userInfo.lastLoginIp
        }}</span>
      </div>
      <div class="home-top-item flex flex-col justify-end h-[48px] ml-[20px]">
        <el-button
          class="home-top-item-val"
          type="primary"
          text="text"
          @click="handleView(1)"
          >查看登录详情</el-button
        >
      </div>
    </div>
    <!-- 中 -->
    <div class="home-center mt-[20px]">
      <div class="home-center-left">
        <div class="p-[25px] rounded-[8px] flex items-center justify-between">
          <!-- 左侧评分区域 -->
          <div class="score-left">
            <span class="font-bold">安全评分</span>
            <div>
              <span class="text-[36px] font-bold mr-[8px]">100</span
              ><span class="unit">%</span>
            </div>
            <div class="w-[500px]">
              <el-progress
                :percentage="100"
                :stroke-width="18"
                :show-text="false"
                color="linear-gradient(to right, #3a8ee6, #1e63b3)"
              />
            </div>
            <div class="mt-[10px]">
              <span class="font-bold">我的账户存在</span
              ><span class="val"> 0 </span><span class="font-bold">项风险</span>
            </div>
          </div>

          <!-- 右侧状态区域 -->
          <img
            class="block w-[130px]"
            alt="Vue logo"
            src="~@/assets/home.png"
          />
        </div>
        <div class="p-[25px] rounded-[8px] mt-[10px]">
          <span class="font-bold">我的账户已经设置 5 项安全项</span>
          <div class="mt-[10px]">
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <div
                  class="w-[40px] h-[40px] rounded-[12px] flex items-center justify-center"
                  style="background-color: #ecf3fe"
                >
                  <van-icon name="lock" :size="24" color="#397EF0" />
                </div>
                <div class="flex flex-col ml-[18px]">
                  <span class="text-[14px]">密码强度</span>
                  <span class="name text-[14px]"
                    >提高密码强度可以增加密码登录安全性</span
                  >
                </div>
              </div>
              <div class="name text-[14px]">中</div>
            </div>
            <div class="flex mt-[10px] items-center justify-between">
              <div class="flex items-center">
                <div
                  class="w-[40px] h-[40px] rounded-[12px] flex items-center justify-center"
                  style="background-color: #effcfa"
                >
                  <van-icon name="checked" :size="24" color="#5DDAC4" />
                </div>
                <div class="flex flex-col ml-[18px]">
                  <span class="text-[14px]">已经设置密保问题</span>
                  <span class="name text-[14px]"
                    >设置密保问题可以找回密码和提高密码登录安全性</span
                  >
                </div>
              </div>
              <div class="name text-[14px]">
                <van-icon class="mr-[5px]" name="passed" />已设置
              </div>
            </div>
            <div class="flex mt-[10px] items-center justify-between">
              <div class="flex items-center">
                <div
                  class="w-[40px] h-[40px] rounded-[12px] flex items-center justify-center"
                  style="background-color: #effcfa"
                >
                  <van-icon name="checked" :size="24" color="#5DDAC4" />
                </div>
                <div class="flex flex-col ml-[18px]">
                  <span class="text-[14px]">密码近期已更换</span>
                  <span class="name text-[14px]">定期修改密码更安全哦</span>
                </div>
              </div>
              <div class="name text-[14px]">
                <van-icon class="mr-[5px]" name="passed" />已设置
              </div>
            </div>
            <div class="flex mt-[10px] items-center justify-between">
              <div class="flex items-center">
                <div
                  class="w-[40px] h-[40px] rounded-[12px] flex items-center justify-center"
                  style="background-color: #fff6f0"
                >
                  <van-icon name="phone" :size="24" color="#FFA561" />
                </div>
                <div class="flex flex-col ml-[18px]">
                  <span class="text-[14px]">手机号码已验证</span>
                  <span class="name text-[14px]"
                    >通过手机设置密码和设置二次验证</span
                  >
                </div>
              </div>
              <div class="name text-[14px]">
                <van-icon class="mr-[5px]" name="passed" />已设置
              </div>
            </div>
            <div class="flex mt-[10px] items-center justify-between">
              <div class="flex items-center">
                <div
                  class="w-[40px] h-[40px] rounded-[12px] flex items-center justify-center"
                  style="background-color: #f3f3ff"
                >
                  <van-icon name="invitation" :size="24" color="#8486F8" />
                </div>
                <div class="flex flex-col ml-[18px]">
                  <span class="text-[14px]">邮箱已验证</span>
                  <span class="name text-[14px]">可通过邮箱找回密码</span>
                </div>
              </div>
              <div class="name text-[14px]">
                <van-icon class="mr-[5px]" name="passed" />已设置
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="home-center-right">
        <div class="p-[25px] rounded-[8px]">
          <div>
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <van-icon name="checked" :size="24" color="#0660B0" />
                <div class="flex flex-col ml-[18px]">
                  <span class="text-[14px]">设置密保</span>
                  <span class="name text-[14px]">您的幸运数字是多少</span>
                </div>
              </div>
              <el-button type="primary" text="text" @click="handleView(2)"
                >更换<van-icon name="arrow" class="ml-[5px]"
              /></el-button>
            </div>
            <div class="flex mt-[10px] items-center justify-between">
              <div class="flex items-center">
                <van-icon name="wechat" :size="24" color="#0660B0" />
                <div class="flex flex-col ml-[18px]">
                  <span class="text-[14px]">绑定邮箱</span>
                  <span class="name text-[14px]">未绑定邮箱</span>
                </div>
              </div>
              <el-button type="primary" text="text" @click="handleView(3)"
                >绑定<van-icon name="arrow" class="ml-[5px]"
              /></el-button>
            </div>
            <div class="flex mt-[10px] items-center justify-between">
              <div class="flex items-center">
                <van-icon name="phone" :size="24" color="#0660B0" />
                <div class="flex flex-col ml-[18px]">
                  <span class="text-[14px]">手机号码</span>
                  <span class="name text-[14px]">已验证</span>
                </div>
              </div>
              <el-button type="primary" text="text" @click="handleView(4)"
                >解绑<van-icon name="arrow" class="ml-[5px]"
              /></el-button>
            </div>
          </div>
        </div>
        <div class="p-[25px] rounded-[8px] mt-[10px]">
          <span class="font-bold">常见问题</span>
          <div class="mt-[10px]">
            <div
              v-for="(question, index) in questionList"
              :key="index"
              class="question truncate text-ellipsis"
            >
              <van-icon name="circle" :size="10" color="#62DEB4" /><span
                class="ml-[15px] text-[14px]"
                >{{ question }}</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
let userInfo = ref({
  name: "超级管理员",
  aliasName: "jhysadmin",
  lastLoginTime: "2023-04-12 12:00:00",
  lastLoginIp: "192.168.1.1"
});
let questionList = ref([
  "用户怎样保证数字校园门户个人信息的安全?",
  "第一次登录数字校园统一身份认证平台，系统提示的问题是什么意思?",
  "数字校园门户是什么?该怎样登录?",
  "为什么每次登录过程都会弹出许多对话框?",
  "如何避免每次登录都会出现这些对话框?"
]);
const handleView = type => {
  switch (type) {
    case 1:
      router.push("/safeCenter/accountSecurity/lastLoginLog");
      break;
    case 2:
      router.push("/safeCenter/accountSecurity/setSecurity");
      break;
    case 3:
      router.push("/safeCenter/accountSecurity/mail");
      break;
    case 4:
      router.push("/safeCenter/accountSecurity/phone");
      break;
  }
};
</script>

<style lang="scss" scoped>
.home {
  &-top {
    &-item {
      &-name {
        color: var(--color-main-text);
      }
    }
  }
  &-center {
    display: grid;
    grid-template-columns: 65% calc(35% - 20px);
    gap: 20px;
    &-left {
      > div {
        background-color: var(--color-main-background-secondary);
        .name {
          color: var(--color-main-text);
        }
      }
    }
    &-right {
      > div {
        background-color: var(--color-main-background-secondary);
        .question {
          border-bottom: 1px dashed;
          cursor: pointer;
        }
        .name {
          color: var(--color-main-text);
        }
      }
    }
  }
}
.unit {
  color: var(--color-main-text);
}
.val {
  color: #fde492;
}
</style>
